<template>
	<view class="">
		<view class="tab_nav">
			<nav-bar
				nav_btn="back"
				:index="index"
				@onPicker="getPicker"
				:title="title"
				:showPicker="showPicker"
				:color="color"
				:placeholder="placeholder"
				:list="list"
				:auto_img="image"
				:background="background"
			></nav-bar>
		</view>
		<view class="">
			<view class="" style="height: 442rpx; background: linear-gradient(#7882dd 0%, #8594e7 100%)">
				<view class="flex flex-column align-center justify-center" style="padding-top: 20rpx">
					<view class="" style="font-size: 26rpx; color: #fff">我的奖励金（元）</view>
					<view class="" style="font-size: 60rpx; color: #fff; margin-top: 10rpx">
						{{ allMoney || 0 }}
					</view>
					<view class="" style="font-size: 20rpx; color: rgba(255, 255, 255, 0.8)">已自动存入商家账户中</view>
				</view>
				<view class="" style="margin-top: 48rpx; border-radius: 32rpx 32rpx 0 0; background: #fff; padding: 60rpx 32rpx 0 32rpx; min-height: 600rpx">
					<view class="flex align-center justify-center" style="margin-bottom: 40rpx">
						<view @click="changeNavIndex(1)" class="flex flex-column align-center">
							<view class="" style="font-size: 30rpx; color: #999" :style="navIndex == 1 ? 'color:#333' : ''">推荐详情</view>
							<view class="" v-if="navIndex == 1" style="width: 46rpx; height: 4rpx; background: #7983de; margin-top: 12rpx"></view>
							<view class="" v-else style="width: 46rpx; height: 4rpx; margin-top: 12rpx"></view>
						</view>
						<view @click="changeNavIndex(2)" class="flex flex-column align-center" style="margin-left: 120rpx">
							<view class="" style="font-size: 30rpx; color: #999" :style="navIndex == 2 ? 'color:#333' : ''">奖励记录</view>
							<view class="" v-if="navIndex == 2" style="width: 46rpx; height: 4rpx; background: #7983de; margin-top: 12rpx"></view>
							<view class="" v-else style="width: 46rpx; height: 4rpx; margin-top: 12rpx"></view>
						</view>
					</view>
					<!-- 推荐详情 -->
					<view
						v-if="navIndex == 1"
						v-for="(item, index) in list1"
						:key="index"
						class=""
						style="background: #f2f2f2; border-radius: 16rpx; padding: 24rpx 28rpx; margin-bottom: 20rpx"
					>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">推荐店铺</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right" v-if="item">
								{{ item.auth_info.shopname }}
							</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">跟进状态</view>
							<view
								class="flex-1 text-overflow1"
								style="font-size: 24rpx; margin-left: 10rpx; text-align: right"
								:style="item.auth_info.follow_status == 0 ? 'color:#7983DE;' : item.auth_info.follow_status == 5 ? 'color:#DE799D;' : 'color:#333'"
							>
								<block v-if="item.auth_info.follow_status == 0">未跟进</block>
								<block v-else-if="item.auth_info.follow_status == 1">跟进中</block>
								<block v-else-if="item.auth_info.follow_status == 2">认证中</block>
								<block v-else-if="item.auth_info.follow_status == 3">审核中</block>
								<block v-else-if="item.auth_info.follow_status == 4">已入驻</block>
								<block v-else-if="item.auth_info.follow_status == 5">已驳回</block>
							</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">跟进人</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">
								{{ item.auth_info.staff_name || '' }}
							</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">推荐时间</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">
								{{ item.createtime | changeTime }}
							</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">入住时间</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">
								{{ item.shop_info.createtime | changeTime }}
							</view>
						</view>
					</view>
					<!-- 奖励记录 -->
					<view v-else v-for="(item, index) in list2" class="" style="background: #f2f2f2; border-radius: 16rpx; padding: 24rpx 28rpx; margin-bottom: 20rpx">
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">奖励原由</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">
								{{ item.type == 1 ? '入住奖励' : item.type == 1 ? '续费奖励' : '' }}
							</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">
								{{ item.type == 1 ? '入住奖励' : item.type == 1 ? '续费奖励' : '' }}
							</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; margin-left: 10rpx; text-align: right; color: #de799d">￥{{ item.price }}</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">店铺名称</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">
								{{ item.shopname || '' }}
							</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">缴费日期</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">
								{{ item.createtime | changeTime }}
							</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">缴费时长</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">{{ item.xfdays || 0 }}月</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">缴费金额</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">￥{{ item.original_price }}</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">奖励比例</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">{{ item.proportion }}%</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">换算时长</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">{{ item.days }}天</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">原店铺到期时间</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">
								{{ item.before_day | changeTime }}
							</view>
						</view>
						<view class="" style="height: 14rpx"></view>
						<view class="flex align-center justify-between">
							<view class="" style="font-size: 24rpx; color: #666">现店铺到期时间</view>
							<view class="flex-1 text-overflow1" style="font-size: 24rpx; color: #333; margin-left: 10rpx; text-align: right">
								{{ item.after_day | changeTime }}
							</view>
						</view>
					</view>
					<view class="flex justify-center" style="padding: 10rpx; position: fixed; bottom: 0; background: #fff">
						<view
							@click="qutuijian"
							class="flex align-center justify-center"
							style="width: 684rpx; height: 86rpx; background: linear-gradient(#ebc498 0%, #ebbe87 100%); border-radius: 43rpx"
						>
							<image src="../static/btnText.png" style="width: 150rpx; height: 40rpx" mode=""></image>
						</view>
					</view>
					<!-- 占位置 -->
					<view class="" style="height: 110rpx"></view>
				</view>
			</view>
		</view>
		<!-- 
			点击推荐入住弹窗
		-->
		<view class="baijing" v-if="show">
			<view class="bj_box">
				<view class="bj_head_img">
					<image class="w100 h100" src="@/pages/news/static/sqxz.png" mode=""></image>
				</view>
				<view class="bj_bon_box">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
						<view id="demo1" class="scroll-view-item uni-bg-red f500 s26 family">
							<rich-text :nodes="instructions"></rich-text>
						</view>
					</scroll-view>
				</view>
				<view class="flex">
					<view class="left_btn s32 familytow fblod txtali" @click="show = false">不同意</view>
					<button style="padding: unset; margin: unset; line-height: unset; font-size: unset; border: unset" open-type="share" :plain="true" hover-class="none">
						<view class="right_btn s32 familytow fblod txtali" @click="show = false">同意</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBarInfo: {},
			// 切换nav
			navIndex: 1,
			title: '',
			image: '../static/tab_jian.png',
			background: 'linear-gradient(#7882DD 0%, #8594E7 100%)',
			color: 'black',
			// 推荐入住弹窗样式
			show: false,
			instructions: '',
			showPicker: true,
			obj: {},
			index: 0,
			list1: [], //推荐详情
			list: [],
			page1: 1,
			lastPage1: 0,
			list2: [], //奖励记录
			page2: 1,
			lastPage2: 0,
			allMoney: 0
		};
	},
	onReachBottom() {
		if (this.navIndex == 1) {
			if (this.page1 < this.lastPage1) {
				this.page1++;
				this.getList1();
			} else {
				uni.showToast({
					title: '我是有底线的!',
					icon: 'none'
				});
			}
		}
		if (this.navIndex == 2) {
			if (this.page2 < this.lastPage2) {
				this.page2++;
				this.getList2();
			} else {
				uni.showToast({
					title: '我是有底线的!',
					icon: 'none'
				});
			}
		}
	},
	filters: {
		changeTime(e) {
			if (!e) {
				return '';
			}
			let time = Number(e) * 1000;
			let date = new Date(time);
			let Y = Number(date.getFullYear()),
				M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1,
				D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
				h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
				m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
				s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return `${Y}-${M}-${D} ${h}:${m}`;
		}
	},
	onLoad(options) {
		this.navBarInfo = this.$navBarInfo;
		this.obj = JSON.parse(options.obj);
		this.obj.name = options.name;
		this.obj.uid = uni.getStorageSync('userInfo').id;
		this.index = this.obj.index;
		this.getShopList();
		this.getList1();
	},
	onShow() {
		this.show = false;
	},
	onShareAppMessage(res) {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage']
		});
	},
	onShareAppMessage(res) {
		let that = this;
		return {
			title: '快来入驻吧！',
			path: '/pages/filePages/merchantInformation/merchantInformation?istuijian=1&obj=' + JSON.stringify(that.obj),
			imageUrl: ''
		};
	},
	methods: {
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.list = res.data.data;
				this.obj.shopId = res.data.data[0].id;
				// this.title = res.data.data[0].shopname
			});
		},
		getPicker(e) {
			this.obj.shopId = this.list[e].id;
			this.navIndex = 1;
			this.index = e;
			this.getList1();
		},
		getList2() {
			this.$request({
				url: 'shop/recommendation_reward',
				data: {
					shopid: this.obj.shopId,
					user_id: uni.getStorageSync('userInfo').id,
					limit: 15,
					page: this.page2
				},
				method: 'post'
			}).then((res) => {
				if (res.data.code == 1) {
					if (this.page2 == 1) {
						this.list2 = res.data.data.data;
					} else {
						this.list2.push(...res.data.data.data);
					}
					this.lastPage2 = res.data.data.last_page;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		getList1() {
			this.$request({
				url: 'shop/apply_recommendation_list',
				data: {
					shopid: this.obj.shopId,
					user_id: uni.getStorageSync('userInfo').id,
					limit: 15,
					page: this.page1
				},
				method: 'post'
			}).then((res) => {
				this.allMoney = res.data.data.count;
				if (res.data.code == 1) {
					if (this.page1 == 1) {
						this.list1 = res.data.data.list.data;
					} else {
						this.list1.push(...res.data.data.list.data);
					}
					this.lastPage1 = res.data.data.list.last_page;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		goback() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 点击去推荐
		qutuijian() {
			this.$request({
				url: 'Article/getTjnotice',
				data: {}
			}).then((res) => {
				if (res.data.code == 1) {
					this.instructions = res.data.data.value;
					this.show = true;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		changeNavIndex(e) {
			if (this.navIndex == e) {
				return;
			}
			this.navIndex = e;
			if (this.navIndex == 1) {
				this.page1 = 1;
				this.getList1();
			}
			if (this.navIndex == 2) {
				this.page2 = 1;
				this.getList2();
			}
		}
	}
};
</script>

<style scoped lang="scss">
.tab_nav {
	background-color: linear-gradient(#7882dd 0%, #8594e7 100%);
}
/* 推荐入住弹窗样式 */
.baijing {
	width: 750rpx;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-items: center;

	.bj_box {
		width: 552upx;
		background: #ffffff;
		border-radius: 32upx 32upx 32upx 32upx;
		margin: 0 auto;

		.bj_head_img {
			width: 552upx;
			height: 168upx;
		}
	}

	.bj_bon_box {
		width: 486upx;
		height: 426upx;
		margin: 26upx auto;

		.scroll-Y {
			height: 426upx;

			.scroll-view-item {
				color: #333333;
			}
		}
	}

	.left_btn {
		width: 276upx;
		height: 100upx;
		background: #cccccc;
		border-radius: 0upx 0upx 0upx 32upx;
		color: #ffffff;
		line-height: 100upx;
	}

	.right_btn {
		width: 276upx;
		height: 100upx;
		background: #ebbe87;
		border-radius: 0upx 0upx 32upx 0upx;
		line-height: 100upx;
		color: #844902;
	}
}
</style>
